<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="add">添加一条新的访客信息</button>
    <table border="" cellspacing=0 cellpadding=10 style="border-collapse: collapse;">
        <thead>
            <tr>
                <th>序列号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="list">
        </tbody>
    </table>
    <script>
        let info = [{
            name: "胡杭",
            age: 16
        }, {
            name: "胜明",
            age: 22
        }, {
            name: "军毅",
            age: 21
        }, {
            name: "晓华",
            age: 13
        }, {
            name: "盛聪",
            age: 23
        }, {
            name: "侦剑",
            age: 32
        }, {
            name: "红翔",
            age: 25
        }, {
            name: "超维",
            age: 18
        }, {
            name: "士琪",
            age: 22
        }, {
            name: "艳华",
            age: 20
        }];


        let add = document.querySelector("#add");
        let tbodyList = document.querySelector("#list");
        let newTd = document.getElementsByClassName("td");
        let del = document.querySelector(".delete");
        let newTr;
        let name;
        let age;
        let i = 0; //获取数组索引值


        add.onclick = function() {
            if (i < info.length) {
                newTr = document.createElement("tr");
                tbodyList.append(newTr);
                name = info[i]['name'];
                age = info[i]['age'];
                newTr.innerHTML = "<td class='num'></td><td class='name'></td><td class='age'></td><td><button class='delete'>删除</button></td>";
                document.querySelectorAll(".num")[i].append(i + 1);
                document.querySelectorAll(".name")[i].append(info[i]["name"]);
                document.querySelectorAll(".age")[i].append(info[i]["age"]);
                i++;
            }
        }
        del.onclick = function() {
            console.log(124);
        }
    </script>
</body>

</html>